<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{$t('repair').repair}}</text></block>
		</cu-custom>

		<view v-if="leavedetails!=null">
			<view class="leave-top-item solid-bottom">
				<image class="img-head round" mode="aspectFill" 
				:src="$constant.IMG_VERSION == $constant.OSS?leavedetails.face.personphoto:$constant.BASEURL+leavedetails.face.personphoto"></image>
				<view class="top-content">
					<view>{{leavedetails.face.personname}}</view>
					<view :class="leavedetails.lstatus==0?'text-green':leavedetails.lstatus==1?'text-orange':'text-red'" class="text-sm">
						{{leavedetails.lstatus==0?$t('approval').reviewPassed:leavedetails.lstatus==1?$t('approval').wait+leavedetails.approvals[active].face.personname+$t('approval').approved:$t('approval').refused}}
					</view>
				</view>
			</view>

			<view class="leave-info">
				<view class="leave-info-item">
					<view class="title">{{$t('approval').appNumber}}</view>
					<view>{{leavedetails.id}}</view>
				</view>
				<view class="leave-info-item">
					<view class="title">{{$t('approval').dept}}</view>
					<view>{{leavedetails.face.depart.departname}}</view>
				</view>
				<view class="leave-info-item">
					<view class="title">{{$t('repair').repairReason}}</view>
					<view>{{leavedetails.preason}}</view>
				</view>
				<view class="leave-info-item">
					<view class="title">{{$t('repair').repairTime}}</view>
					<view class="text-gray text-sm">{{DateFormat(leavedetails.ptime.time,'3')}}</view>
				</view>
				<!-- 		<view v-if="leavedetails.pleaveimg.length>0" class="leave-info-item">
					<view class="title">图片</view>
					<image @tap="ViewImage" v-for="(item,index) in pleaveimg.leaveimg" :key="index" class="img-head round" mode="aspectFill" :src="item"></image>
				</view> -->
			</view>

			<!-- 审批流程 -->
			<view class="margin-top leave-approval">
				<approval-steps :options="approvals"></approval-steps>
			</view>
		</view>
		<!-- 底部操作菜单 -->
		<view v-if="showApproval">
			<view style="height: 100upx;"></view>
			<view class="leave-action solid-top">
				<view>{{$t('approval').appProgress}}</view>
				<view class="button-view">
					<view @click="approval(2)" class="btn-padding text-blue">{{$t('approval').refuse}}</view>
					<view @click="approval(0)" class="btn-agree bg-blue">{{$t('approval').agree}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import ApprovalSteps from '@/components/approval-steps/approval-steps.vue'
	var utils = require('@/common/utils.js');
	let _self = null
	export default {
		components: {
			ApprovalSteps
		},
		data() {
			return {
				showApproval: false,
				appid: '',
				active: 0,
				leaveid: '',
				approvals: [],
				leavedetails: null
			}
		},
		onLoad(options) {
			this.$constant.checkUserInfo()
			_self = this
			console.log(options)
			_self.leaveid = options.leaveid
			if (typeof(_self.leaveid) != 'undefined') {
				_self.InitData()
			}
		},
		methods: {
			ViewImage(e) {
				let imgs = _self.leavedetails.leaveimg
				let that = this
				let localImgs = []
				if(this.$constant.IMG_VERSION == this.$constant.LOCAL){
					imgs.forEach(function(item){
						localImgs.push(that.$constant.BASEURL + item)
					})
				}else{
					localImgs = imgs
				}
				uni.previewImage({
					urls: localImgs
				});
			},
			approval(status) {
				if (_self.appid == '') {
					uni.showToast({
						title: _self.$t('approval').noAppId,
						icon: ''
					})
					return
				}
				//审批
				uni.showLoading({
					title: _self.$t('approval').inProgress,
				})
				uni.request({
					url: this.$constant.BASEURL + this.$constant.SUBMIT_APPROVAL,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: _self.appid,
						appstatus: status,
					},
					complete: (res) => {
						uni.hideLoading()
						if (res.data.code == 0) {
							//重新刷新数据
							_self.InitData()
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false,
								cancelText: this.$t('sure'),
								confirmText: this.$t('cancel')
							})
						}
					}
				})
			},
			InitData() {
				_self.showApproval = false
				uni.showLoading({
					title: _self.$t('loading')
				})
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.VIEW_LEAVE_DETAILS,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: _self.leaveid,
						apptype: 2 //审批类型 1为请假
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 0) {
							_self.leavedetails = res.data.data
							//设置审批流程
							var list = res.data.data.approvals
							_self.approvals = [] //先清空数组
							_self.approvals.push({
								title: _self.$t('approval').originator,
								subtitle: _self.$t('approval').myself,
								desc: _self.DateFormat(res.data.data.createDate.time, '4'),
								img:_self.$constant.IMG_VERSION == _self.$constant.OSS?res.data.data.face.personphoto:_self.$constant.BASEURL+res.data.data.face.personphoto,
								// img: res.data.data.face.personphoto,
								icon: {
									color: '#1cbbb4',
									type: 'checkbox-filled'
								}
							})
							list.forEach(function(item, index) {
								var approval = {
									title: _self.$t('approval').approver,
									desc: item.apptime == null ? '' : _self.DateFormat(item.apptime.time, '4'),
									// img: item.face.personphoto,
									img:_self.$constant.IMG_VERSION == _self.$constant.OSS?item.face.personphoto:_self.$constant.BASEURL+item.face.personphoto,
									icon: {}
								}
								switch (item.appstatus) {
									case '0':
										approval.icon.color = '#1cbbb4'
										approval.icon.type = 'checkbox-filled'
										approval.subtitle = `${item.face.personname}(${_self.$t('approval').ageed})`
										break;
									case '1':
										approval.icon.color = '#f37b1d'
										approval.icon.type = 'pulldown'
										approval.subtitle = `${item.face.personname}(${_self.$t('approval').audited})`
										break;
									case '2':
										approval.icon.color = '#e54d42'
										approval.icon.type = 'clear'
										approval.subtitle = `${item.face.personname}(${_self.$t('approval').declined})`
										break;
									case '3':
										_self.active = index //记录这条数据的id
										approval.icon.color = '#0081FF'
										approval.icon.type = 'eye'
										approval.subtitle = `${item.face.personname}(${_self.$t('approval').inApproval})`
										//判断是不是自己审核，是需要显示审核操作框
										if (getApp().globalData.userid == item.face.id) {
											_self.showApproval = true
											_self.appid = item.id
										}
										break;
									default:
										break;
								}
								_self.approvals.push(approval)
							})
							// console.log(res.data.data.approvals)
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false
							})
						}
					},
					fail(e) {
						console.log(e)
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			DateFormat(timestamp, vminimum, stime) {
				return utils.DateFormat(timestamp, vminimum, stime,this.$_i18n.locale)
			}
		}
	}
</script>

<style>
	.img-head {
		width: 68upx;
		height: 68upx;
		margin-right: 30upx;
		top: 0;
	}

	.leave-top-item {
		display: flex;
		padding: 25upx 30upx;
		background-color: #FFFFFF;
		min-height: 100upx;
	}

	.top-content {
		padding-left: 20upx;
	}

	.leave-info {
		background-color: #FFFFFF;
		padding: 8upx 30upx;
		min-height: 100upx;
		font-size: 28upx;
	}

	.leave-info .title {
		min-width: 20%;
		color: #aaaaaa;
	}

	.leave-info .leave-info-item {
		display: flex;
		padding: 2upx 0upx;
		align-items: center;
	}

	.leave-approval {
		background-color: #FFFFFF;
		min-height: 200upx;
	}

	.leave-action {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 6upx 30upx;
		align-items: center;
	}

	.leave-action .button-view {
		border-radius: 10upx;
		border: solid 1upx #c8c7cc;
		display: flex;
	}

	.leave-action .button-view .btn-padding {
		padding: 10upx 40upx;
	}

	.leave-action .button-view .btn-agree {
		padding: 10upx 40upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
	}

	.text-green {
		color: #1cbbb4;
	}
</style>
